function fetchUser() {
    showSpinner();
    fetch('<https://randomuser.me/api/>')
    .then((res) => res.json())
    .then((data) => {
    const user = data.results[0];
    displayUser(user);
    hideSpinner();
 });
}
function displayUser(user) {
    // 根据性别改变背景颜⾊
    if (user.gender === 'female') {
    document.body.style.backgroundColor = 'rebeccapurpl
   e';
    } else {
        document.body.style.backgroundColor = 'steelblue';
    }
    // 更新DOM中的⽤户信息
    const userDisplay = document.querySelector('#user');
    userDisplay.innerHTML = `
    <div class="flex justify-between">
        <div class="flex">
            <img class="w-48 h-48 rounded-full mr-8" src
   ="${user.picture.large}" />
        <div class="space-y-3">
            <p class="text-xl"><span class="font-bol
   d">姓名: </span>${user.name.first} ${user.name.last}</p>
            <p class="text-xl"><span class="font-bol
   d">邮箱: </span>${user.email}</p>
            <p class="text-xl"><span class="font-bol
   d">电话: </span>${user.phone}</p>
            <p class="text-xl"><span class="font-bol
   d">位置: </span>${user.location.city}, ${user.location.countr
   y} </p>
            <p class="text-xl"><span class="font-bol
   d">年龄: </span>${user.dob.age}</p>
                     </div>
                </div>
             </div>
 `;
}
function showSpinner() {
    document.querySelector('.spinner').style.display = 'bloc
   k';
   }
   function hideSpinner() {
    document.querySelector('.spinner').style.display = 'non
   e';
}

document.querySelector('#generate').addEventListener('click',
    fetchUser);
    <div id="user" class="mt-6">
 <div class="flex justify-between">
 <div class="flex">
 <img class="w-48 h-48 rounded-full mr-8" src="<ht
tps://randomuser.me/api/portraits/women/45.jpg>" />
 <div class="space-y-3">
 <p class="text-xl"><span class="font-bold">姓
名: </span>Sara Wilson</p>
 <p class="text-xl"><span class="font-bold">邮
箱: </span>sarawilson@gmail.com</p>
 <p class="text-xl"><span class="font-bold">电
话: </span>(555) 555-5555</p>
 <p class="text-xl"><span class="font-bold">位
置: </span>Boston, MA</p>
 <p class="text-xl"><span class="font-bold">年
龄: </span>30</p>
</div>
 </div>
 </div>
</div>